<template>
  <div class="mainPriceArea">
    <p>
      <span style="color: red;font-weight: bold;font-size: large;margin-right: 5px;">￥{{ prodetail.newprice
      }}</span>
      <span style="color:#aaa;;font-size: small;">￥{{ prodetail.oldprice }}</span>
    </p>
    <div class="chakan">
      <span>
        <span class="l_top">{{ prodetail.iscutdownmoney ? '直降' : '' }}</span>
        <span class="l_mido">买到赚到</span>
      </span>

      <div class="l_btm" @click="changeShow">查看</div>
    </div>
    <div>{{ prodetail.proname }}</div>
    <div style="color:#aaa;">{{ prodetail.description }}</div>
    <div style="background: #fcebeb;color: rgb(177, 100, 100) ;height:30px;line-height: 30px">
      <span style="color: #d84c4c;font-weight: bold;display:inline-block;margin-right: 10px;margin-left: 10px;">七鲜云卖场</span> 
      <span>海量超品汇</span>
    </div>


    <van-popup v-model="isshow" round position="bottom" style="height: 60%; padding-top: 4px;">
      <div class="youhui">
        <div class=top>
        
        <p>优惠</p>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  props: {
    prodetail: Object
  },
  data(){
    return{
      isshow:false
    }
  },
  methods:{
    changeShow(){
      this.isshow=!this.isShow
    }

  }
}
</script>

<style lang="scss" scoped>
.mainPriceArea {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  background: #fff;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 10px;
  margin-bottom: 10px;

  .chakan {
    display: flex;
    justify-content: space-between;

    .l_top {
      color: rgb(247, 103, 103);
      background: #f6e0e0;
      display: inline-block;
      padding: 5px;
      margin-right: 10px;
    }

    .l_btm {
      width: 40px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      color:rgb(247, 103, 103);
      border-radius: 7px;
      font-size: 12px;
      background: #f6e0e0;
    }
  }
  .youhui{
    .top{
      display:flex;
      justify-content: space-between;
    }
  }
}

</style>